import { useMemo } from "react";
import { omit } from "lodash-es";
import { Icon } from "@/components/Icon";
import "../style/BasicArrow.less";

interface PropType {
	expand: Boolean;
	up?: Boolean;
	down?: Boolean;
	inset?: Boolean;
	iconStyle?: Recordable;
}

const BasicArrow = (props: PropType & ComponentNode) => {
	const attrs = omit(props, ["expand", "up", "down", "inset"]);
	const prefixCls = "basic-arrow";

	// get component class
	const getClass = useMemo(() => {
		const { expand, up, down, inset } = props;
		let classList = [prefixCls, props.className];
		if (expand) classList.push(`${prefixCls}--active`);
		if (up) classList.push("up");
		if (inset) classList.push("inset");
		if (down) classList.push("down");
		return classList.join(" ");
	}, [props]);

	return (
		<span className={getClass}>
			<Icon icon="ion:chevron-forward" style={attrs.iconStyle} />
		</span>
	);
};

export default BasicArrow;
